<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<base href="/">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="" />
  <title></title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">
  </head>
  <body>
  <!-- Start Page Loading -->
  <!-- End Page Loading -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
  <!-- START TOP -->
  <div th:replace="TOP :: Top"></div>

  <div th:replace="LeftSide::side"></div>
  <!-- END SIDEBAR -->
<!-- //////////////////////////////////////////////////////////////////////////// --> 

 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTENT -->
<div class="content">

  <!-- Start Page breadcrumb -->
  <div class="page-header">
      <ol class="breadcrumb">
      </ol>
  </div>
  <!-- End Page breadcrumb -->




 <!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTAINER -->
<div class="container-padding container-widget">


  <!-- Start Row -->
  <div class="row">

    <!-- Start Panel -->
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-title">
            <a class="btn btn-primary" href="/NewCustomer">
                <i class="fa fa-plus"></i> &nbsp; 添加客户
            </a>
        </div>
        <div class="panel-body table-responsive">

            <table id="example0" class="table display">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>邮件</th>
                        <th>客户等级</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody>
                    <tr th:each="cs:${list}">
<!--                        <td th:text="${cs.getId()}"></td>-->
                        <td th:text="${cs.getId()}"></td>
                        <td><a th:href="@{/viewcustomerinfo(id=${cs.getId()})}" th:text="${cs.getRealname()}"></a></td>
                        <td th:text="${cs.getPhone()}"></td>
                        <td th:text="${cs.getAddress()}"></td>
                        <td th:text="${cs.getEmail()}"></td>
                        <td th:text="${cs.getLevel()}"></td>
                        <td th:text="${cs.getState()}"></td>
                        <td>
                            <a th:href="@{/updateinfo(id=${cs.id})}">修改</a>
<!--                            <a th:href="@{/customerInfo1/delete(id=${cs.id},current=1,size=5)}">删除</a>-->
                            <a th:href="@{/delete(id=${cs.id},current=${#request.getParameter('current')},size=5)}">删除</a>
                            <a th:href="@{/create(id=${cs.id},current=${#request.getParameter('current')},size=5)}">创建工单</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <a th:href="@{/CustomerList(current=1,size=5)}">首页</a>
            <a th:href="@{/CustomerList(current=${i},size=5)}" th:each="i : ${#numbers.sequence(1,pagesCount)}"><span th:text="${i}" style="border: 1px solid #e3e3e3;height: 16px;width: 16px;text-align: center;vertical-align: middle;padding-left: 5px;margin-left: 10px">1</span></a>
            <a th:href="@{/CustomerList(current=${pagesCount},size=5)}">尾页</a>
        </div>

      </div>
    </div>
    <!-- End Panel -->



    <!-- Start Panel -->

    <!-- End Panel -->



  </div>
  <!-- End Row -->






</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->




</div>
<!-- End Content -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->

  <!-- //////////////////////////////////////////////////////////////////////////// -->
  <!-- START SIDEPANEL -->
  <div role="tabpanel" class="sidepanel">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#today" aria-controls="today" role="tab" data-toggle="tab">TODAY</a></li>
          <li role="presentation"><a href="#tasks" aria-controls="tasks" role="tab" data-toggle="tab">TASKS</a></li>
          <li role="presentation"><a href="#chat" aria-controls="chat" role="tab" data-toggle="tab">CHAT</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">

          <!-- Start Today -->
          <div role="tabpanel" class="tab-pane active" id="today">

              <div class="sidepanel-m-title">
                  Today
                  <span class="left-icon"><a href="#"><i class="fa fa-refresh"></i></a></span>
                  <span class="right-icon"><a href="#"><i class="fa fa-file-o"></i></a></span>
              </div>

              <div class="gn-title">NEW</div>

              <ul class="list-w-title">
                  <li>
                      <a href="#">
                          <span class="label label-danger">ORDER</span>
                          <span class="date">9 hours ago</span>
                          <h4>New Jacket 2.0</h4>
                          Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="label label-success">COMMENT</span>
                          <span class="date">14 hours ago</span>
                          <h4>Bill Jackson</h4>
                          Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="label label-info">MEETING</span>
                          <span class="date">at 2:30 PM</span>
                          <h4>Developer Team</h4>
                          Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="label label-warning">EVENT</span>
                          <span class="date">3 days left</span>
                          <h4>Birthday Party</h4>
                          Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
                      </a>
                  </li>
              </ul>

          </div>
          <!-- End Today -->

          <!-- Start Tasks -->
          <div role="tabpanel" class="tab-pane" id="tasks">

              <div class="sidepanel-m-title">
                  To-do List
                  <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
                  <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
              </div>

              <div class="gn-title">TODAY</div>

              <ul class="todo-list">
                  <li class="checkbox checkbox-primary">
                      <input id="checkboxside1" type="checkbox"><label for="checkboxside1">Add new products</label>
                  </li>

                  <li class="checkbox checkbox-primary">
                      <input id="checkboxside2" type="checkbox"><label for="checkboxside2"><b>May 12, 6:30 pm</b> Meeting with Team</label>
                  </li>

                  <li class="checkbox checkbox-warning">
                      <input id="checkboxside3" type="checkbox"><label for="checkboxside3">Design Facebook page</label>
                  </li>

                  <li class="checkbox checkbox-info">
                      <input id="checkboxside4" type="checkbox"><label for="checkboxside4">Send Invoice to customers</label>
                  </li>

                  <li class="checkbox checkbox-danger">
                      <input id="checkboxside5" type="checkbox"><label for="checkboxside5">Meeting with developer team</label>
                  </li>
              </ul>

              <div class="gn-title">TOMORROW</div>
              <ul class="todo-list">
                  <li class="checkbox checkbox-warning">
                      <input id="checkboxside6" type="checkbox"><label for="checkboxside6">Redesign our company blog</label>
                  </li>

                  <li class="checkbox checkbox-success">
                      <input id="checkboxside7" type="checkbox"><label for="checkboxside7">Finish client work</label>
                  </li>

                  <li class="checkbox checkbox-info">
                      <input id="checkboxside8" type="checkbox"><label for="checkboxside8">Call Johnny from Developer Team</label>
                  </li>

              </ul>
          </div>
          <!-- End Tasks -->

          <!-- Start Chat -->
          <div role="tabpanel" class="tab-pane" id="chat">

              <div class="sidepanel-m-title">
                  Friend List
                  <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
                  <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
              </div>

              <div class="gn-title">ONLINE MEMBERS (3)</div>
              <ul class="group">
                  <li class="member"><a href="#"><img src="img/profileimg.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status online"></span></li>
                  <li class="member"><a href="#"><img src="img/profileimg2.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status busy"></span></li>
                  <li class="member"><a href="#"><img src="img/profileimg3.png" alt="img"><b>Fred Stonefield</b>New York</a><span class="status away"></span></li>
                  <li class="member"><a href="#"><img src="img/profileimg4.png" alt="img"><b>Chris M. Johnson</b>California</a><span class="status online"></span></li>
              </ul>

              <div class="gn-title">OFFLINE MEMBERS (8)</div>
              <ul class="group">
                  <li class="member"><a href="#"><img src="img/profileimg5.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status offline"></span></li>
                  <li class="member"><a href="#"><img src="img/profileimg6.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status offline"></span></li>
              </ul>

              <form class="search">
                  <input type="text" class="form-control" placeholder="Search a Friend...">
              </form>
          </div>
          <!-- End Chat -->

      </div>

  </div>
  <!-- END SIDEPANEL -->
  <!-- //////////////////////////////////////////////////////////////////////////// -->

  <!-- Start Footer -->
  <div class="row footer">
      <div class="col-md-6 text-left">

      </div>
      <div class="col-md-6 text-right">

      </div>
  </div>
  <!-- End Footer -->

  <!-- ================================================
  jQuery Library
  ================================================ -->
  <script type="text/javascript" src="js/jquery.min.js"></script>

  <!-- ================================================
  Bootstrap Core JavaScript File
  ================================================ -->
  <script src="js/bootstrap/bootstrap.min.js"></script>

  <!-- ================================================
  Plugin.js - Some Specific JS codes for Plugin Settings
  ================================================ -->
  <script type="text/javascript" src="js/plugins.js"></script>

  <!-- ================================================
  Data Tables
  ================================================ -->
  <script src="js/datatables/datatables.min.js"></script>

  <script>
      $(document).ready(function() {
          $('#example0').DataTable();
      } );
  </script>



  <script>
      $(document).ready(function() {
          var table = $('#example').DataTable({
              "columnDefs": [
                  { "visible": false, "targets": 2 }
              ],
              "order": [[ 2, 'asc' ]],
              "displayLength": 25,
              "drawCallback": function ( settings ) {
                  var api = this.api();
                  var rows = api.rows( {page:'current'} ).nodes();
                  var last=null;

                  api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                      if ( last !== group ) {
                          $(rows).eq( i ).before(
                              '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                          );

                          last = group;
                      }
                  } );
              }
          } );

          // Order by the grouping
          $('#example tbody').on( 'click', 'tr.group', function () {
              var currentOrder = table.order()[0];
              if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
                  table.order( [ 2, 'desc' ] ).draw();
              }
              else {
                  table.order( [ 2, 'asc' ] ).draw();
              }
          } );
      } );
  </script>
  </body>
</html>